<template>
	<div class="box">
        <div class="title">
            <!-- <img src="../assets/img/title.png" alt=""> -->
            <span>{{title}}</span>
        </div>
        <div class="area boxPosition" :style="{width: width+'px',height:height+'px'}">
            <span class="icon1"></span>
            <span class="icon2"></span>
            <span class="icon3"></span>
            <span class="icon4"></span>
            <slot></slot>
        </div>
		
	</div>
</template>

<script>
export default {
	name: "box",
	data() {
		return {};
    },
    props:{
        width: {
            type: Number,
            default: 600
        },
        height: {
            type: Number,
            default: 140
        },
        title: {
            type: String,
            default: ''
        },
    },
	created(){
        
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title{
    width: 298px;
    height: 43px;
    background: url('../assets/img/boxtitle.png') no-repeat;
    margin-bottom: 10px;
    font-size:20px;
    font-family:'Microsoft YaHei';
    font-weight:bold;
    color:rgba(14,252,255,1);
    line-height:43px;
    text-indent: 20px;
}
.area{
    background:rgba(11,21,44,0.8);
    border:1px solid rgba(96,118,173,1);
    box-shadow:0px 0px 5px 0px rgba(14,252,255,0.77);
    box-sizing: border-box;
}
.boxPosition{
    position: relative;
}
.boxPosition .icon1{
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    top: -2px;
    left: -2px;
    border-top: 2px solid #0EFCFF;
    border-left: 2px solid #0EFCFF;
}
.boxPosition .icon2{
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    top: -2px;
    right: -2px;
    border-top: 2px solid #0EFCFF;
    border-right: 2px solid #0EFCFF;
}
.boxPosition .icon3{
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    bottom: -2px;
    left: -2px;
    border-bottom: 2px solid #0EFCFF;
    border-left: 2px solid #0EFCFF;
}
.boxPosition .icon4{
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    bottom: -2px;
    right: -2px;
    border-bottom: 2px solid #0EFCFF;
    border-right: 2px solid #0EFCFF;
}
</style>
